<template>
  <kbd class="kbd kbd-lg mt-9 mb-28">推荐歌单</kbd>
  <div
    class="grid xl:grid-cols-7 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 gap-4 -translate-y-20"
  >
    <div
      class="flex flex-col w-30 cursor-pointer link-hover"
      v-for="item in recommendedSongList"
      :key="item.id"
      @click="goRecommendedSongList(item.id)"
    >
      <img :src="item.picUrl" alt="" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getRecommendedSongList } from "../../../utils/api";
import { useSearchDetail } from "../../../store/searchDetail";
const searchDetail = useSearchDetail();
//路由
const router = useRouter();
//歌单数据
let recommendedSongList = reactive<any[]>([]);
onMounted(async () => {
  let res: any[] = await getRecommendedSongList();
  if (recommendedSongList.length) return;
  recommendedSongList.push(...res);
});
//点击事件
const goRecommendedSongList = (id: number) => {
  searchDetail.removeMvList();
  router.push("recommendedSongList?id=" + id);
};
</script>

<style scoped></style>
